<template>
  <div>
    <el-card class = "box-card">
      <el-row :gutter = "20">
        <el-form ref = "form" label-width = "80px">
          <el-col :span = "6">
            <div class = "grid-content bg-purple">
              <el-input v-model = "queryParameter.title" placeholder = "请根据用户名搜索"></el-input>
            </div>
          </el-col>
        </el-form>
        <el-col :span = "4">
          <div class = "grid-content bg-purple">
            <el-button @click = "clearSearchResults">清除</el-button>
            <el-button type = "primary" @click="getPermissionsObj">搜索</el-button>
          </div>
        </el-col>
        <el-col :offset = "11" :span = "2">
          <div class = "grid-content bg-purple">
            <el-button icon = "el-icon-edit" type = "success" @click = "addDialogVisible=true">新增权限组</el-button>
          </div>
        </el-col>
      </el-row>
      <template>
        <el-alert style = "margin: 10px 0" :title = "`数据一共 ${counts} 条`" type = "info" show-icon
                  :closable = "false"></el-alert>
      </template>
      <div>
        <template>
          <el-table :data="permissionsList">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column align = "center" prop = "title" label = "用户名" width = ""></el-table-column>
            <el-table-column align = "center" prop = "update_date" label = "日期" width = "200" sortable></el-table-column>
            <el-table-column align = "center" prop = "" label = "操作" width = "300">
              <template>
                <el-button type = "primary" plain icon = "el-icon-edit" circle></el-button>
                <el-button type = "danger" plain icon = "el-icon-delete" circle></el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </div>
      <div class = "block" style = "margin:20px;float: right">
        <el-pagination
          background
          @size-change = "handleSizeChange"
          @current-change = "handleCurrentChange"
          :current-page = "queryParameter.page"
          :page-sizes = "[5, 10, 20, 50]"
          :page-size = "queryParameter.pagesize"
          layout = "prev, pager, next,sizes,jumper"
          :total = "counts">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import * as Permissions from '@/api/base/permissions'
import dayjs from 'dayjs'

export default {
  data () {
    return {
      // 请求参数
      queryParameter: {
        title: '',
        page: 1,
        pagesize: 10
      },
      permissionsList: [], // 权限列表
      counts: null // 权限列表counts
    }
  },

  created () {
    this.getPermissionsObj()
  },

  methods: {
    // 获取权限列表
    async getPermissionsObj () {
      try {
        const { data: res } = await Permissions.list(this.queryParameter)
        res.list.forEach(item => {
          item.update_date = dayjs(item.update_date).format('YYYY-MM-DD')
        })
        this.permissionsList = res.list
        this.counts = res.counts
        console.log('权限列表', res)
      } catch (err) {
        console.log(err)
      }
    },
    // 清除搜索结果
    clearSearchResults () {
      this.queryParameter.title = ''
      this.getPermissionsObj()
    },
    // 分页
    handleSizeChange (pagesize) {
      this.queryParameter.pagesize = pagesize
      this.getPermissionsObj()
    },
    handleCurrentChange (page) {
      this.queryParameter.page = page
      this.getPermissionsObj()
    }
  }
}
</script>

<style scoped lang='less'>

</style>
